<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>
  
    <script type="text/babel">
    //  hoc : higher-order component 模式 技术

    // 场景 ： 
    // 组件代码复用 （公共代码抽离）
    // 使用三方组件 ： 保护三方组件 => 三方组件增强  不侵害原有组件

    // class A extends React.Component{

    //     common(){
    //         return 'common function logic'
    //     }

    //     render(){
    //         return (
    //             <div>
    //                 <h1>A component</h1>
    //                 {
    //                     this.common() // common 谁调用指向谁
    //                 }
    //             </div>
    //         )
    //     }
    // }

    // class B extends React.Component{

    //     common(){
    //         return 'common function logic'
    //     }

    //     render(){
    //         return (
    //             <div>
    //                 <h1>B component</h1>
    //                 {
    //                     this.common() // common 谁调用指向谁
    //                 }
    //             </div>
    //         )
    //     }
    // }

    // class C extends React.Component{

    //     common(){
    //         return 'common function logic'
    //     }

    //     render(){
    //         return (
    //             <div>
    //                 <h1>C component</h1>
    //                 {
    //                     this.common() // common 谁调用指向谁
    //                 }
    //             </div>
    //         )
    //     }
    // }

        // function App(){
        //     return (
        //         <div>
        //             <A />
        //             <B />
        //             <C />
        //         </div>
        //     )
        // }


        // 首字母大写；参数 是需要被增强的组件； 返回值 新定义的组件
    let HOC = (C)=>{
        return class _ extends React.Component{
            // 增强逻辑
            common(){
                    return 'common function logic'
            }

            render(){
                // 把增强逻辑  通过props注入 被增强的组件
                return <C common={this.common}/>
            }
        }
    }

    class A extends React.Component{
        render(){
            return (
                <div>
                    <h1>A component</h1>
                    {
                        this.props.common()
                    }
                </div>
            )
        }
    }
    class B extends React.Component{
        render(){
            return (
                <div>
                    <h1>B component</h1>
                    {
                        this.props.common()
                    }
                </div>
            )
        }
    }
    class C extends React.Component{
        render(){
            return (
                <div>
                    <h1>C component</h1>
                    {
                        this.props.common()
                    }
                </div>
            )
        }
    }
   
    const HOCA =  HOC(A)
    const HOCB =  HOC(B)
    const HOCC =  HOC(C)


    function App(){
            return (
                <div>
                    <HOCA />
                    <HOCB />
                    <HOCC />
                </div>
            )
        }

        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>